<template>
  <div>
    <el-form labelWidth="120px" :model="formData">
      <el-form-item :label="label + '型号'">
        <el-select v-model="formData.DeviceModel" :placeholder="label + '型号'">
          <el-option
            v-for="item in Model"
            :key="item"
            :label="item"
            :value="item"
          />
        </el-select>
      </el-form-item>
      <el-form-item :label="label + '设备号'">
        <el-select
          v-model="formData.DeviceIDs"
          :placeholder="label + '设备号'"
          multiple
        >
          <el-option
            v-for="item in DeviceId"
            :key="item"
            :label="item"
            :value="item"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="工序编号">
        <el-input v-model="formData.tyOPpe" />
      </el-form-item>
      <el-form-item label="加工时间预设">
        <el-input v-model="formData.ProcessTime" />
      </el-form-item>
      <el-form-item label="上料时间和预设">
        <el-input v-model="formData.TransportTime" />
      </el-form-item>
      <!-- <el-form-item label="托盘类型">
        <el-input v-model="formData.type" />
      </el-form-item> -->

      <el-form-item prop="list">
        <vab-form-table
          v-model="formData.ActionList"
          drag
          :row-template="rowTemplate"
          style="width: 100%"
        >
          <el-table-column align="center" label="动作" prop="Action">
            <template #default="{ row }">
              <el-select v-model="row.Action" placeholder="动作">
                <el-option
                  v-for="item in Actions"
                  :key="item"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="执行设备类型"
            prop="DeviceClassify"
          >
            <template #default="{ row }">
              <el-select
                v-model="row.DeviceClassify"
                placeholder="执行设备类型"
                disabled
              >
                <el-option
                  v-for="item in Model"
                  :key="item"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column align="center" label="参数" prop="ParamName">
            <template #default="{ row }">
              <el-select v-model="row.ParamName" placeholder="参数">
                <el-option
                  v-for="item in Param"
                  :key="item"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column align="center" label="值" prop="ParamValue">
            <template #default="{ row }">
              <el-select filterable v-model="row.ParamValue" placeholder="值">
                <el-option
                  v-for="item in Value"
                  :key="item"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </template>
          </el-table-column>
        </vab-form-table>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import VabFormTable from '@/extra/VabFormTable'

  import { FlowChartOptions } from '@/api/production'

  export default {
    components: { VabFormTable },
    name: '',
    props: {
      nodeData: {
        type: Object,
        default: () => {},
      },
      lf: {
        type: Object || String,
        default: () => {},
      },
      // label: {
      //   type: String,
      //   default: '',
      // },
      // rowTemplate: {
      //   type: Object || String,
      //   default: () => {},
      // },
    },
    watch: {
      lf: {
        handler(v1, v2) {
          console.log('v1v1v1')
        },
      },
    },
    data() {
      return {
        formData: {
          NodeID: '',
          NodeType: '',
          DeviceModel: '',
          DeviceIDs: [],
          OP: '',
          ProjectName: '',
          ProcessTime: '0',
          NextNodeList: '0',
          PrevNodeList: '',
          imageWidth: '',
          imageHight: '',
          LocationX: '',
          LocationY: '',
          ActionList: [],
        },
        label: '',
        rowTemplate: {},
        options: [
          {
            value: 'Option1',
            label: 'Option1',
          },
          {
            value: 'Option2',
            label: 'Option2',
          },
        ],

        DeviceInfoList: [],
        DeviceType: [],
        DeviceId: [],
        Param: [],
        Model: [],
        Actions: [],
        Value: [],
      }
    },
    mounted() {
      console.log('v1v1v1111')
      // const { properties } = this.$props.nodeData
      // if (properties) {
      //   this.formData = Object.assign({}, this.formData, properties)
      // }
      console.log('rowTemplate', this.rowTemplate)
      this.rowTemplate = {
        Action: '',
        DeviceClassify: '当前设备',
        FuncName: '',
        ParamName: '',
        ParamValue: '',
      }
      FlowChartOptions().then((res) => {
        console.log(res)
        this.DeviceInfoList = res.DeviceInfoList
        console.log('aaaaaaaa', this.DeviceInfoList[0]['Actions'])

        console.log(' this.rowTemplate', this.rowTemplate)
        const { properties } = this.$props.nodeData
        if (properties) {
          console.log('propertiesproperties', this.$props.nodeData)
          let label = ''
          let index = 0
          let data = this.$props.nodeData
          if (data.type == 'user1') {
            label = '机床'
            index = 0
          } else if (data.type == 'user2') {
            label = '定位'
          } else if (data.type == 'user3') {
            label = '清洗'
            index = 1
          } else if (data.type == 'user4') {
            label = '检测'
            index = 2
          }
          console.log('indexindex', this.DeviceInfoList[index])
          this.Model = this.DeviceInfoList[index]['Model']
          this.DeviceType = this.DeviceInfoList[index]['DeviceType']
          this.Actions = this.DeviceInfoList[index]['Actions']
          this.Value = this.DeviceInfoList[index]['Value']
          this.DeviceId = this.DeviceInfoList[index]['DeviceId']
          this.Param = this.DeviceInfoList[index]['Param']

          this.label = label
          this.formData = Object.assign({}, this.formData, properties)

          this.rowTemplate = {
            Action: this.DeviceInfoList[index]['Actions'][0],
            DeviceClassify: '当前设备',
            FuncName: '',
            ParamName: this.DeviceInfoList[index]['Param'][0],
            // ParamValue: this.DeviceInfoList[index]['Value'][0],
            ParamValue: '',
          }
        }
      })
    },
    methods: {
      onSubmit() {
        console.log('submit!')
        const { id } = this.$props.nodeData
        this.$props.lf.setProperties(id, this.formData)
        this.$emit('onClose')
      },
    },
  }
</script>
<style scoped></style>
